{% extends "base.html" %}

{% block title %}万岛潜水 - 首页{% endblock %}

{% block styles %}
<style>
    /* 首页特定样式 */
    .hero-section {
        position: relative;
        overflow: hidden;
        background: linear-gradient(rgba(0, 102, 204, 0.7), rgba(0, 51, 102, 0.7)), url("{{ url_for('static', filename='img/hero-bg.jpg') }}");
        background-size: cover;
        background-position: center;
        color: white;
        padding: 120px 0;
        margin-bottom: 60px;
    }
    
    .hero-section:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, rgba(0,102,204,0.3) 0%, rgba(0,51,102,0.5) 100%);
        z-index: 1;
    }
    
    .hero-section .container {
        position: relative;
        z-index: 2;
    }
    
    .bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        animation: float 8s infinite ease-in-out;
    }
    
    @keyframes float {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
        }
    }
    
    .feature-icon {
        font-size: 2.5rem;
        color: #0066cc;
        margin-bottom: 20px;
    }
    
    .section-title {
        position: relative;
        margin-bottom: 50px;
        padding-bottom: 15px;
        text-align: center;
        color: #0066cc;
    }
    
    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background-color: #0066cc;
    }
    
    .testimonial-card {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .testimonial-card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 20px;
    }
    
    .course-card {
        transition: transform 0.3s, box-shadow 0.3s;
        border: none;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        height: 100%;
    }
    
    .course-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    
    .course-card img {
        height: 200px;
        object-fit: cover;
    }
    
    .coach-card {
        text-align: center;
        transition: transform 0.3s;
    }
    
    .coach-card:hover {
        transform: translateY(-10px);
    }
    
    .coach-card img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 20px;
        border: 5px solid #0066cc;
    }
    
    .activity-card {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .activity-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.5s;
    }
    
    .activity-card:hover img {
        transform: scale(1.1);
    }
    
    .activity-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: white;
    }
    
    .stats-section {
        background-color: #0066cc;
        color: white;
        padding: 60px 0;
        margin: 60px 0;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .stat-number {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .cta-section {
        background: linear-gradient(rgba(0, 102, 204, 0.8), rgba(0, 51, 102, 0.8)), url("{{ url_for('static', filename='img/cta-bg.jpg') }}");
        background-size: cover;
        background-position: center;
        color: white;
        padding: 80px 0;
        text-align: center;
        margin-bottom: 0;
    }
    
    .wave-separator {
        margin: 60px 0;
        overflow: hidden;
        position: relative;
    }
    
    .wave-separator svg {
        display: block;
        width: 100%;
    }
    
    .scroll-indicator {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    
    .scroll-indicator a {
        display: block;
        color: white;
        font-size: 2rem;
        animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-20px);
        }
        60% {
            transform: translateY(-10px);
        }
    }
    
    .parallax-section {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 100px 0;
        position: relative;
    }
    
    .parallax-section:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .parallax-content {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;
    }
</style>

<script>
    // 创建气泡效果
    document.addEventListener('DOMContentLoaded', function() {
        const heroSection = document.querySelector('.hero-section');
        if (heroSection) {
            for (let i = 0; i < 20; i++) {
                createBubble(heroSection);
            }
        }
    });
    
    function createBubble(parent) {
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        
        const size = Math.random() * 100 + 20;
        const left = Math.random() * 100;
        const delay = Math.random() * 8;
        const duration = Math.random() * 8 + 8;
        
        bubble.style.width = `${size}px`;
        bubble.style.height = `${size}px`;
        bubble.style.left = `${left}%`;
        bubble.style.bottom = `-${size}px`;
        bubble.style.animationDelay = `${delay}s`;
        bubble.style.animationDuration = `${duration}s`;
        
        parent.appendChild(bubble);
    }
</script>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">探索海底世界的奇妙</h1>
                <p class="lead mb-4">万岛潜水是三亚专业的潜水培训和体验中心，拥有专业的教练团队和一流的设备。无论您是初学者还是有经验的潜水员，我们都能为您提供最佳的潜水体验。</p>
                <div class="d-flex gap-3">
                    <a href="{{ url_for('main.courses') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-book-open me-2"></i>查看课程
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-envelope me-2"></i>联系我们
                    </a>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <img src="{{ url_for('static', filename='img/hero-image.png') }}" alt="潜水体验" class="img-fluid rounded-3 shadow">
            </div>
        </div>
    </div>
</section>

<div class="scroll-indicator">
    <a href="#features">
        <i class="fas fa-chevron-down"></i>
    </a>
</div>

<!-- 波浪分隔符 -->
<div class="wave-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
        <path fill="#0066cc" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

<!-- 特色部分 -->
<section class="container mb-5">
    <div class="row">
        <div class="col-md-3">
            <div class="text-center mb-4">
                <div class="feature-icon">
                    <i class="fas fa-certificate"></i>
                </div>
                <h5>专业认证</h5>
                <p class="text-muted">我们的所有教练都持有国际认证，确保您的安全和专业培训。</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="text-center mb-4">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h5>安全保障</h5>
                <p class="text-muted">我们使用高品质设备，并严格遵循安全规程，确保您的潜水体验安全无忧。</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="text-center mb-4">
                <div class="feature-icon">
                    <i class="fas fa-map-marked-alt"></i>
                </div>
                <h5>优质潜点</h5>
                <p class="text-muted">我们精心挑选最佳潜水点，让您欣赏到最美丽的海底景观。</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="text-center mb-4">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h5>小团体体验</h5>
                <p class="text-muted">我们限制每组人数，确保每位客人都能得到充分的关注和指导。</p>
            </div>
        </div>
    </div>
</section>

<!-- 热门课程 -->
<section class="container mb-5">
    <h2 class="section-title">热门课程</h2>
    <div class="row">
        {% for course in courses[:3] %}
        <div class="col-md-4">
            <div class="course-card card">
                <img src="{{ url_for('static', filename='uploads/' + course.image) if course.image and course.image != 'default.jpg' else url_for('static', filename='img/default-course.jpg') }}" class="card-img-top" alt="{{ course.name }}">
                <div class="card-body">
                    <h5 class="card-title">{{ course.name }}</h5>
                    <p class="card-text text-muted">{{ course.description[:100] }}...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="badge bg-primary">{{ course.duration }}</span>
                        <span class="fw-bold text-primary">¥{{ course.price }}</span>
                    </div>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ url_for('main.course_detail', id=course.id) }}" class="btn btn-outline-primary w-100">了解详情</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="text-center mt-4">
        <a href="{{ url_for('main.courses') }}" class="btn btn-primary">查看全部课程</a>
    </div>
</section>

<!-- 数据统计 -->
<section class="stats-section">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="stat-item">
                    <div class="stat-number">5000+</div>
                    <div>学员</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <div class="stat-number">20+</div>
                    <div>专业教练</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <div class="stat-number">15+</div>
                    <div>潜水点</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <div class="stat-number">10+</div>
                    <div>年经验</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 教练团队 -->
<section class="container mb-5">
    <h2 class="section-title">专业教练团队</h2>
    <div class="row">
        {% for coach in coaches %}
        <div class="col-md-3">
            <div class="coach-card">
                <img src="{{ url_for('static', filename='uploads/' + coach.photo) if coach.photo and coach.photo != 'default.jpg' else url_for('static', filename='img/default-coach.jpg') }}" alt="{{ coach.name }}">
                <h5>{{ coach.name }}</h5>
                <p class="text-muted">{{ coach.specialty }}</p>
                <p class="small">{{ coach.experience }}年教学经验</p>
                <a href="{{ url_for('main.coach_detail', id=coach.id) }}" class="btn btn-sm btn-outline-primary">查看详情</a>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- 最新活动 -->
<section class="container mb-5">
    <h2 class="section-title">最新活动</h2>
    <div class="row">
        {% for activity in activities %}
        <div class="col-md-4">
            <div class="activity-card">
                <img src="{{ url_for('static', filename='uploads/' + activity.image) if activity.image and activity.image != 'default.jpg' else url_for('static', filename='img/default-activity.jpg') }}" alt="{{ activity.title }}">
                <div class="activity-content">
                    <h5>{{ activity.title }}</h5>
                    <p class="small mb-2">{{ activity.date.strftime('%Y-%m-%d %H:%M') }}</p>
                    <a href="{{ url_for('main.activity_detail', id=activity.id) }}" class="btn btn-sm btn-light">查看详情</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="text-center mt-4">
        <a href="{{ url_for('main.activities') }}" class="btn btn-primary">查看全部活动</a>
    </div>
</section>

<!-- 客户评价 -->
<section class="container mb-5">
    <h2 class="section-title">客户评价</h2>
    <div class="row">
        <div class="col-md-4">
            <div class="testimonial-card">
                <img src="{{ url_for('static', filename='img/testimonial-1.jpg') }}" alt="客户照片">
                <h5>张先生</h5>
                <p class="text-muted small">体验潜水</p>
                <p>"第一次潜水就选择了万岛潜水，教练非常专业，耐心指导，让我克服了对水的恐惧，看到了美丽的海底世界。"</p>
                <div class="text-warning">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="testimonial-card">
                <img src="{{ url_for('static', filename='img/testimonial-2.jpg') }}" alt="客户照片">
                <h5>李女士</h5>
                <p class="text-muted small">开放水域潜水员课程</p>
                <p>"教练团队非常专业，课程安排合理，理论与实践结合得很好。通过这次培训，我获得了OW证书，非常满意！"</p>
                <div class="text-warning">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="testimonial-card">
                <img src="{{ url_for('static', filename='img/testimonial-3.jpg') }}" alt="客户照片">
                <h5>王先生</h5>
                <p class="text-muted small">高级开放水域潜水员</p>
                <p>"作为一名有经验的潜水员，我对万岛潜水的专业性和安全标准印象深刻。设备维护得很好，潜点选择也很棒。"</p>
                <div class="text-warning">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 行动召唤 -->
<section class="cta-section">
    <div class="container">
        <h2 class="display-5 mb-4">准备好探索海底世界了吗？</h2>
        <p class="lead mb-4">立即预约您的潜水体验，开启一段难忘的海底探险之旅！</p>
        <a href="{{ url_for('main.booking_info') }}" class="btn btn-light btn-lg">
            <i class="fas fa-calendar-check me-2"></i>立即预约
        </a>
    </div>
</section>

<!-- 视差滚动部分 -->
<section class="parallax-section" style="background-image: url('{{ url_for('static', filename='img/parallax-bg.jpg') }}');">
    <div class="container">
        <div class="parallax-content">
            <h2 class="display-4 mb-4">探索海底世界的奇妙</h2>
            <p class="lead mb-4">加入我们的潜水课程，开启一段难忘的海底探险之旅</p>
            <a href="{{ url_for('main.courses') }}" class="btn btn-light btn-lg">查看课程</a>
        </div>
    </div>
</section>
{% endblock %} 